<template>
    <!-- class绑定 -->
    <div :class="c1Class">第一个div</div>
    <!-- 
        ok样式是否应用取决于flag的值
        当flag的值为true时,ok样式生效
    -->
    <div :class="{ok: flag}">第二个div</div>
    <div :class="{ok: !flag}">第三个div</div>
    <!-- 多个样式可以共存 -->
    <div class="c1" :class="{ok: flag}">第四个div</div>
    <!-- 
        当flag的值为true时,error生效
        当!flag的值为true,即flag的值为false时,ok生效
    -->
    <div :class="{error: flag,ok: !flag}">第五个div</div>
    <!-- 
        需求:用户的长度为5-12位
        如果符合要求,则使用ok样式
        如果不符合要求,则使用error样式
    -->
    用户名:<input type="text" :class="{ok: flag, error: !flag}" @input="checkUsername($event.target.value)">
    <!-- 
        在样式绑定的时候,可以同时绑定多个样式,通过绑定数组的方式进行操作
        如果这些样式中存在冲突的样式,按照选择器规则进行应用
        例如:此处使用的是class样式
        则按照代码顺序,从前向后执行
    -->
    <div :class="[c1Class,errorClass,okClass]">第六个div</div>

    <!-- style绑定 -->
    <p :style="{color:color,'font-size':fontSize}">第一个段落</p>
    <!-- 当属性名与属性值一致时,可以直接写属性名即可 -->
     <p :style="{color,'font-size':fontSize}">第二个段落</p>
    
</template>
<script setup>
import { ref } from 'vue';

const c1Class = ref('c1')
const flag = ref(true)
const okClass = ref('ok')
const errorClass = ref('error')

function checkUsername(username){
    flag.value = username.length >= 5 && username.length <= 12
}

const color = ref('blue')
const fontSize = ref('26px')

</script>
<style>
.c1 {
    font-size: 32px;
}
.error{
    color:red;
}
.ok{
    color:green;
}

</style>